<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>颜色样式</title>
</head>
<style>
    .main {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }

    canvas {
        outline: 1px solid black;
        margin: 10px 10px;
    }
</style>

<body>
    <div class="main">
        <section>
            <div>渐变</div>
            <canvas id="canvas1" width="200" height="200"></canvas>
        </section>
        <section>
            <div>各种边角</div>
            <canvas id="canvas2" width="200" height="200"></canvas>
        </section>
        <section>
            <div>径向渐变</div>
            <canvas id="canvas3" width="200" height="200"></canvas>
        </section>
        <section>
            <div>同心渐变</div>
            <canvas id="canvas4" width="200" height="200"></canvas>
        </section>
        <section>
            <div>不同心但外圆包含内圆</div>
            <canvas id="canvas5" width="200" height="200"></canvas>
        </section>
        <section>
            <div>不同心，外圆内圆分离</div>
            <canvas id="canvas6" width="200" height="200"></canvas>
        </section>
        <section>
            <div>图案样式 Patterns</div>
            <canvas id="canvas7" width="200" height="200"></canvas>
        </section>
        <section>
            <div>阴影 Shadows</div>
            <canvas id="canvas8" width="200" height="200"></canvas>
        </section>
        <section>
            <div>Canvas 填充规则</div>
            <canvas id="canvas9" width="200" height="200"></canvas>
        </section>
    </div>
</body>
<script src="./grid.js"></script>
<script>
    // 1.色彩样式
    /**
     * fillStyle = color:设置图形的填充颜色
     * strokeStyle = color:设置图形轮廓的颜色
     */
    var ctx1 = document.getElementById('canvas1').getContext('2d');
    for (var i = 1; i < 6; i++) {
        for (var j = 1; j < 6; j++) {
            ctx1.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)';
            ctx1.fillRect(j * 25, i * 25, 25, 25);
        }
    }
    // 2.线型样式
    // lineWidth = value:设置线条宽度
    /**
     * lineCap:设置线条末端样式
     * 参数:
     * butt 线段末端以方形结束。
     * round 线段末端以圆形结束。
     * square 线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域
     */
    var ctx2 = document.getElementById('canvas2').getContext('2d');
    drawGrid('orange', 10, 10, ctx2);

    ctx2.strokeStyle = "red";
    for (var i = 0; i < 10; i++) {
        ctx2.lineWidth = 1 + i;
        ctx2.beginPath();
        ctx2.lineCap = 'round';
        ctx2.moveTo(10 + i * 14, 25);
        ctx2.lineTo(10 + i * 14, 140);
        ctx2.stroke();
    }
    /**
     * lineJoin = type:设定线条与线条间接合处的样式
     * round
     * bevel 
     * miter(默认)
     */
    /**
     * miterLimit = value:限制当两条线相交时交接处最大长度；所谓交接处长度（斜接长度）是指线条交接处内角顶点到外角顶点的长度
     */
    /**
     * getLineDash():设置当前虚线样式
     * setLineDash(segments):设置当前虚线样式
     * lineDashOffset():设置虚线样式的起始偏移量
     */
    ctx2.beginPath();
    ctx2.moveTo(150, 10);
    ctx2.lineTo(170, 100);
    ctx2.lineTo(180, 60);
    ctx2.lineJoin = 'miter';
    ctx2.lineWidth = 10;
    ctx2.miterLimit = 10;
    ctx2.strokeStyle = "black"
    ctx2.stroke();

    // 3.渐变Gradients
    /**
     * createLinearGradient(x1, y1, x2, y2):线性渐变
     * 参数:
     * 渐变的起点 (x1,y1) 与终点 (x2,y2)
     * createRadialGradient(x1, y1, r1, x2, y2, r2):径向渐变
     * 参数:
     * 前三个定义一个以 (x1,y1) 为原点，半径为 r1 的圆，后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆
     * gradient.addColorStop(position, color):
     */
    //径向
    var ctx3 = document.getElementById('canvas3').getContext('2d');
    var linearGradient = ctx3.createLinearGradient(0, 0, 250, 250);
    linearGradient.addColorStop(0, 'yellow');
    linearGradient.addColorStop(.5, 'red');
    linearGradient.addColorStop(1, 'green');
    ctx3.fillStyle = linearGradient;
    ctx3.fillRect(0, 0, 200, 200);
    // 同心
    var ctx4 = document.getElementById('canvas4').getContext('2d');
    var rr = ctx4.createRadialGradient(100, 100, 40, 100, 100, 100);
    rr.addColorStop(0, 'red');
    rr.addColorStop(.5, 'yellow');
    rr.addColorStop(1, 'blue');
    ctx4.fillStyle = rr;
    ctx4.fillRect(0, 0, 200, 200);
    ctx4.fill();
    // 不同心但是外圆包含内圆
    var ctx5 = document.getElementById('canvas5').getContext('2d');
    var rr2 = ctx5.createRadialGradient(150, 150, 20, 160, 160, 50);
    rr2.addColorStop(0, 'red');
    rr2.addColorStop(.5, 'yellow');
    rr2.addColorStop(1, 'blue');
    ctx5.fillStyle = rr2;
    ctx5.fillRect(0, 0, 200, 200);
    ctx5.fill();

    //不同心，外圆内圆分离
    var ctx6 = document.getElementById('canvas6').getContext('2d');
    var rr3 = ctx6.createRadialGradient(20, 20, 10, 100, 100, 50);
    rr3.addColorStop(0, 'red');
    rr3.addColorStop(.8, 'yellow');
    rr3.addColorStop(1, 'blue');
    ctx6.fillStyle = rr3;
    ctx6.fillRect(0, 0, 200, 200);

    // 4.图案样式 Patterns
    /**
     * createPattern(image, type)
     * Type:repeat，repeat-x，repeat-y 和 no-repeat
     */
    var ctx7 = document.getElementById('canvas7').getContext('2d');
    var img = new Image();
    img.src = "https://7n.w3cschool.cn/attachments/image/20170619/mayuan_canvas_radial1.jpg";
    img.onload = function () {
        var ptn = ctx7.createPattern(img, 'repeat');
        ctx7.fillStyle = ptn;
        ctx7.fillRect(0, 0, 200, 200);
    }
    // 5.阴影 Shadows
    var ctx8 = document.getElementById('canvas8').getContext('2d');
    var img = new Image();
    img.src =
        "https://cdn.jsdelivr.net/gh/flutterchina/website@1.0/images/flutter-mark-square-100.png";
    img.onload = function () {
        ctx8.shadowOffsetX = 10;
        ctx8.shadowOffsetY = 10;
        ctx8.shadowBlur = 8;
        ctx8.shadowColor = "#333";
        ctx8.drawImage(img, 10, 10);
    }
    // Canvas 填充规则
    var ctx9 = document.getElementById('canvas9').getContext('2d');
    ctx9.beginPath();
    ctx9.arc(100,100,50,0,Math.PI*2,true);
    ctx9.arc(100,100,20,0,Math.PI*2,true);
    ctx9.fill("evenodd");
</script>

</html>